@rmwc/ripple

Ripples

MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material “ink ripple” interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.

• Module @rmwc/ripple
• Import styles:
  • Using CSS Loader
    • import '@rmwc/ripple/styles';
  • Or include stylesheets
    • '@material/ripple/dist/mdc.ripple.css'
• MDC Docs: https://material.io/develop/web/components/ripples/

Ripples will wrap whatever child component you pass it and apply the appropriate classes and styles.

<Ripple>
  <p>Standard Ripple</p>
</Ripple>

<Ripple primary>
  <p>Primary</p>
</Ripple>

<Ripple accent>
  <p>Accent</p>
</Ripple>

<Ripple unbounded>
  <p>Unbounded</p>
</Ripple>

Ripple

A component for adding Ripples to other components.

Props

Name	Type	Description
accent	undefined | false | true	Makes the ripple an accent color
disabled	undefined | false | true	makes the ripple disabled
foundationRef	React.Ref<MDCRippleFoundation>	Advanced: A reference to the MDCFoundation.
primary	undefined | false | true	Makes the ripple primary
surface	undefined | false | true	For internal use
unbounded	undefined | false | true	Makes the ripple unbounded

Changelog

6.1.4 (2020-09-11)

Build System / Dependencies

• deps: bump elliptic from 6.5.2 to 6.5.3 (0e5d097b)

New Features

• Tab: Add ability to set focusOnActivate (ab155a96)

Bug Fixes

• Select:
  • added the "sudden removal" story (616ee47f)
  • fixed unhandled error on "sudden" item removal (b34c0b47)
• base:
  • Properly pass foundation in useFoundation effect (cd556bc3)
  • Use local foundation reference in useFoundation effect (b9fdc94c)
  • Re-set apiRef in useFoundation after nulling it (748bdf35)
• Tab: activeTabIndex always updating automatically (ed0f0091)

Other Changes

• remove not use deps from externals (e03ed26a)

Tests

• Select: Story for enhanced Select with Portal (e882c13a)
• Menu: Show index in hoistToBody story (b0600e28)